<template>
	<a-modal ref="myModal" width="auto" v-model:visible="formVisible" :align-center="true" @cancel="handleCancel" :footer="false"
		:mask-closable="false">
		<template #title>
			<a-image width="200" height="150" :src="$index.imgUrl+'loginLogo.png'" style="transform: translateY(7%);"
				draggable="false" :preview="false" />
		</template>
		<a-menu mode="horizontal" :default-selected-keys="['1']"
			style="width:auto;background-color:var(--color-bg);transform: translate(0%,-50%);" :accordion="true">
			<a-menu-item key="1">账号登录</a-menu-item>
		</a-menu>
		<a-form ref="myLoginForm" size="medium" :model="loginForm" @submit-success="handleSuccess"
			style="width:calc(30vw);height:auto;padding-left: 5%;" autocomplete="on">
			<a-space direction="vertical" :size="15">
				<a-form-item class="itemStyle" field="userName" label="账号" :show-colon="true" :rules="[{required:true,message:'账号为必填项'},{minLength:5,message:'账号必须大于等于5位'},
						{match:/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{4,9}$/,message:'账号必须是字母、数字、下划线且不能以下划线开始或结束'}]"
					:validate-trigger="['change','input']">
					<a-input v-model="loginForm.userName" placeholder="请输入账号..." :max-length="10" show-word-limit
						style="width:calc(80%);">
						<template #prefix>
							<icon-user />
						</template>
					</a-input>
				</a-form-item>
				<a-form-item class="itemStyle" field="passWord" label="密&nbsp;&nbsp;&nbsp;码" :show-colon="true" :rules="[{required:true,message:'密码为必填项'},{minLength:5,message:'密码必须大于5位'},
						{match:/^(?!_)(?!.*_$)(?=.*[A-Za-z])(?=.*\d)[a-zA-Z0-9]{4,9}$/,message:'密码必须包含字母和数字且不能以下划线开始或结束'}]"
					:validate-trigger="['change','input']">
					<a-input-password v-model="loginForm.passWord" placeholder="请输入密码..." style="width:calc(80%);"
						:max-length="12" show-word-limit allow-clear>
						<template #prefix>
							<icon-safe />
						</template>
					</a-input-password>
				</a-form-item>
				<a-form-item class="itemStyle-verify" field="verify" label="验证码" :show-colon="true" :rules="[{required:true,message:'验证码为必填项'},{length:5,message:'验证码必须为5位'},
						{match:/^[a-zA-Z0-9]{5}$/,message:'验证码必须是5位'}]" :validate-trigger="['change','input']">
					<a-row justify="start">
						<a-col :span="11">
							<a-input v-model="loginForm.verify" style="width:calc(95%);" placeholder="验证码"
								:max-length="5" show-word-limit>
								<template #prefix>
									<icon-tag />
								</template>
							</a-input>
						</a-col>
						<a-col :span="12" :offset="1">
							<a-image id="captCha" class="captChaStyle" width="120" height="32"
								:src="apiUrlHome+apiUrl.captCha" draggable="false" :preview="false"
								@click="refreshCaptCha" />
						</a-col>
					</a-row>
				</a-form-item>
				<a-space direction="vertical" style="margin-left: 11%;" :size="15">
					<a-row justify="center" align="start">
						<a-col :span="5" :offset="23">
							<a-link :hoverable="false">忘记密码</a-link>
						</a-col>
					</a-row>
					<a-row :span="11">
						<a-button type="primary" class="buttonStyle" html-type="submit" @submit="handleSuccess">
							<span v-if="formVisible == true && commitStatus == true">
								<a-space>
									登录中
									<a-spin class="LoginLoading" style="color: azure;" />
								</a-space>
							</span>
							<span v-else-if="formVisible == true">
								登录
							</span>
						</a-button>
					</a-row>
					<a-row :span="11">
						<a-button class="buttonStyle" @click="resetAll()">重置</a-button>
					</a-row>
				</a-space>
			</a-space>
		</a-form>
	</a-modal>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';

	import apiUrl from '@/constant/index/apiUrl.js';
	import indexApi from '@/module/index/api/index.js';

	let {
		proxy
	} = getCurrentInstance();

	const props = defineProps({
		formVisible: Boolean,
		loginForm: Object
	});

	const emit = defineEmits();
	
	const env = import.meta.env.VITE_MODE_NAME;

	const apiUrlHome =
		import.meta.env.VITE_API_URL_HOME;
	const apiUrlGateWay =
		import.meta.env.VITE_API_URL_GATEWAY;

	let myLoginForm = ref(null);
	let loginStatus = reactive({});
	let commitStatus = ref(false);
	let myModal = ref(null);

	function handleCancel() {
		emit('getloginFormVisible', !props.formVisible);
		refreshCaptCha();
		myLoginForm.value.resetFields();
	}

	async function handleSuccess(values) {
		console.log('formData', values);
		loginStatus.resp = await indexApi.toLogin(values);
		loginStatus.data = loginStatus.resp.data;
		loginStatus.flag = loginStatus.resp.flag;
		console.log('form', loginStatus);
		if (loginStatus.data == null)
			commitStatus.value = false;
		if (loginStatus.resp.flag == false && loginStatus.resp.message == '验证码校验失败') {
			proxy.$message.error('验证码输入错误!');
		} else if (loginStatus.resp.flag == false && loginStatus.resp.message == '密码错误') {
			proxy.$message.error('密码错误!');
		} else if (loginStatus.resp.flag == false && loginStatus.resp.message == '用户不存在') {
			proxy.$message.error('用户不存在!');
		} else if (loginStatus.resp.flag == false && loginStatus.resp.message == '用户并发错误') {
			proxy.$message.error('用户并发错误!');
		}
		 else {
			commitStatus.value = true;
			window.setTimeout(() => {
				console.log('登录中');
				if (loginStatus.resp.flag == true) {
					if (loginStatus.resp.message == 'token生成成功') {
						sessionStorage.setItem("token", loginStatus.resp.data.token);
						proxy.$message.success('登录成功!');
						emit('getloginFormVisible', !props.formVisible);
						//隐藏登录表单，并清除状态和填写过得字段
						resetAll();
						refreshCaptCha();
						commitStatus.value = false;
					} else if (loginStatus.resp.message == 'token验证通过') {
						proxy.$message.success('登录成功!');
						emit('getloginFormVisible', !props.formVisible);
						//隐藏登录表单，并清除状态和填写过得字段
						resetAll();
						refreshCaptCha();
						commitStatus.value = false;
					}
					emit("getLoginStatus", loginStatus.resp);
				}
			}, 1000);
		}
		document.querySelector("body").setAttribute("style", "overflow: auto !important;");
	}

	function resetAll() {
		myLoginForm.value.resetFields();
		myLoginForm.value.clearValidate();
	}

	async function refreshCaptCha() {
		let captCha = await indexApi.getCaptcha();
		//console.log('captCha',captCha);
		if(env == 'development'){
			document.getElementById('captCha').src = apiUrlGateWay + apiUrl.captCha;
		}
		else if(env == 'test'){
			document.getElementById('captCha').src = apiUrlHome + apiUrl.captCha;
		}
	}

	onMounted(() => {});
</script>

<style lang="less" scoped>
	@import '@/assets/index/css/loginForm.less';
</style>
